<template>
	<view class="container">
		<view v-if="!isLoaded"></view>
		<view v-else class="content">
			<view v-if="tabMenus.length == 0" class="data-empty-wh100">
				<u-empty text="做法分组为空,请添加后再重试~~" />
			</view>
			<!-- 内容区  -->
			<view v-else class="details" style="padding: 20rpx">
				<uni-forms ref="form" :modelValue="details" :rules="rules">
					<uni-forms-item class="form-item" label="做法分组" name="taskTypeId">
						<view class="lbl">做法分组：</view>
						<picker class="form-item-right" style="flex: 1" @change="bindPicker1Change" v-model="details.taskTypeId" :range="tabMenus" :range-key="'name'">
							<view class="uni-input">
								{{ tabMenus.length == 0 ? '请选择做法分组' : tabMenus.find((item) => item.id == details.taskTypeId).name }}
							</view>
						</picker>
					</uni-forms-item>

					<uni-forms-item class="form-item" label="做法标签" name="name">
						<view class="lbl">做法标签:</view>
						<uni-easyinput trim clearable class="form-item-right" type="text" v-model="details.name" />
					</uni-forms-item>

					<uni-forms-item class="form-item" label="做法变价" name="addPriceWay">
						<view class="lbl">做法变价：</view>
						<picker class="form-item-right" @change="bindPicker2Change" :range-key="'value'" :range="addPriceWayList" v-model="details.addPriceWay">
							<view class="uni-input">
								{{ addPriceWayList[details.addPriceWay].value }}
							</view>
						</picker>
					</uni-forms-item>

					<uni-forms-item class="form-item" label="价格" name="price">
						<view class="lbl">价格:</view>
						<uni-easyinput trim clearable class="form-item-right" type="digit" v-model="details.price" @blur="blurEvent" />
						<!--            <uni-number-box
              v-model="details.price"
              :min="0"
              :max="99999"
              :step="0.01"
            ></uni-number-box> -->
					</uni-forms-item>

					<uni-forms-item class="form-item" label="是否通用" name="currencyFlag">
						<view class="lbl">是否通用:</view>
						<!-- <radio-group
              class="form-item-right"
              name="currencyFlag"
              @change="radioChange"
            >
              <label style="margin-right: 30rpx">
                <radio :value="1" :checked="details.currencyFlag == 1" />
                <text>是</text>
              </label>
              <label>
                <radio :value="0" :checked="details.currencyFlag !== 1" />
                <text>否</text>
              </label>
            </radio-group> -->
						<u-radio-group v-model="details.currencyFlag">
							<u-radio size="20" activeColor="#edac2f" :customStyle="{ marginTop: '12rpx' }" label="是" :name="1"></u-radio>
							<u-radio size="20" activeColor="#edac2f" :customStyle="{ marginLeft: '8px', marginTop: '12rpx' }" label="否" :name="0"></u-radio>
						</u-radio-group>
					</uni-forms-item>
				</uni-forms>
				<li-bottom-btns mode="add" @btnEditOrSaveSubmitClick="btnAddClick" />
			</view>
		</view>
	</view>
</template>

<script>
import { umodal, utoast, uShowLoading, uHideLoading, uNavigateTo } from '../../../utils/uniUtils.js';
export default {
	data() {
		return {
			isLoaded: false,
			rules: {
				// 对name字段进行必填验证
				name: {
					rules: [
						{
							required: true,
							errorMessage: '请输入做法名称！'
						}
					]
				}
			},
			searchParam: {
				name: ''
			},
			prefixIconStyle: {
				fontSize: '24px'
			},
			activeStyle: {
				color: '#F3C45D'
			},
			pattern: {
				buttonColor: '#F3C45D'
			},
			tabMenus: [],
			leftMenus: null,
			currentCateIdx: 0, //左边默认分类
			addPriceWayList: [
				// 加价方式
				{
					id: 0,
					value: '不加价'
				},
				{
					id: 1,
					value: '固定加价'
				},
				{
					id: 2,
					value: '按重量加价'
				}
			],
			details: {
				taskTypeId: null,
				name: '',
				addPriceWay: 0,
				price: 0,
				currencyFlag: 1, // 是否通用
				isExclusive: false
			}, //   做法详情
			disabled: false, // 禁用
			lock: false // 节流锁
		};
	},
	async onLoad({ tabCurrentId }) {
		try {
			uShowLoading();
			await this.GetFoodTaskCategory();
			this.isLoaded = true;
			uHideLoading();
			if (tabCurrentId) {
				// 带过来的分组数据
				this.details.taskTypeId = tabCurrentId;
			}
		} catch (error) {
			console.log(error, 'error');
			this.isLoaded = false;
			uHideLoading();
		}
	},
	methods: {
		blurEvent() {
			this.details.price = isNaN(parseFloat(this.details.price)) ? 0 : parseFloat(this.details.price);
		},
		fabClick() {
			uNavigateTo('/pages/workbench/food/transfer');
		},
		bindPicker1Change(e) {
			console.log('e-->', e);
			this.details.taskTypeId = this.tabMenus[e.detail.value].id;
		},
		bindPicker2Change(e) {
			console.log('e-->', e);
			this.details.addPriceWay = this.addPriceWayList[e.detail.value].id;
		},

		/**
		 * 做法分组选择事件
		 */
		taskCataChange(e) {
			console.log(e);
		},
		/**
		 * 获取做法分类
		 */
		async GetFoodTaskCategory() {
			let {
				data: { list }
			} = await this.$api.GetFoodTaskCategory({
				pageNum: 1,
				pageSize: 9999
			});
			console.log('list-->', list);
			this.tabMenus = list;
			if (this.tabMenus.length > 0) {
				this.details.taskTypeId = this.tabMenus[0].id;
			}
		},
		/**
		 * 按钮点击事件
		 */
		async btnAddClick() {
			if (this.details.name.trim().length == 0) {
				utoast('做法名称为空！', 'error');
				return;
			}

			if (this.lock == true) {
				return;
			}

			if (!(await umodal('确定要提交吗？'))) {
				return;
			}
			this.lock = true;
			const res = await this.AddFoodTask();
			if (res?.code == 0) {
				utoast('操作成功');
				setTimeout(() => {
					uni.hideToast();
					uni.navigateTo({
						url: '/pages/workbench/task/list'
					});
					this.lock = false;
				}, 2000);
			}
			setTimeout(() => {
				this.lock = false;
				console.log('fail', this.lock);
			}, 2000);
		},
		/**
		 * 添加做法
		 */
		async AddFoodTask() {
			return await this.$api.AddFoodTask(this.details);
		},
		radioChange(e) {
			data.details.currencyFlag = e.detail.value;
		}
	}
};
</script>

<style lang="scss" scoped>
@import '~@/pages/workbench/food/list.scss';

.container {
	.details {
		background-color: #fff;

		.form-item {
			display: flex;
			padding: 14rpx 0;

			.lbl {
				width: 80px;
				font-size: 14px;
			}

			.form-item-right {
				flex: 1;
			}
		}
	}
	picker {
		flex: 1;
		border: 1px solid #cacaca;
		background-color: #fff;
		padding: 7rpx 10rpx;
		border-radius: 5px;
		position: relative;
	}
}
</style>
